<!-- 行为 -->
 <!-- lang="ts" :支持ts语法  setup：是 Vue3 的组合式 API 写法 -->
<script lang="ts" setup>
import { ref }from 'vue'

const isShow = ref(true)
const toggleShow = ()=>{
  // 取反后 重新赋值
  isShow.value = !isShow.value
}
</script>

<!-- 结构 -->
 <template>
 <button @click="toggleShow()">开关按钮</button>
<!-- 
    v-show 控制的标签，还会保留在页面中，值为 false 时只是被隐藏 频繁切换显示隐藏的场景
    通过 style="display：none;"  不可见，不占位（类似鸿蒙的 Visibility.None）
  -->
<div class="box" v-show="isShow">我是通过 v-show 条件渲染的盒子 </div>
<!-- 
   要么显示，要么隐藏，不频繁切换的场景 数据量较大，但一开始不显示，后来才显示
    v-if 控制的标签，值为 false 时，不会创建，已创建的也会被删除（类似鸿蒙的 if 条件渲染）
  -->
 <div class="box" v-if="isShow">我是通过 v-if 条件渲染的盒</div>
 </template>

 <!-- 样式 -->
  <!-- scoped:样式 只对当前组件有效，解决命名冲突 -->
  <style scoped>
  .box{
    width: 100px;
    height: 100px;
    background-color: pink;
    margin: 10px;
  }
</style>